<template>
  <div class="contend examinationContend subjectTTContend">
    <div class="container">
      <section class="chooseCarType">
        <div class="topTitleTab">
          <span>当前位置：首页 > 模拟考试 > {{subText}}</span>
        </div>
      </section>
      <!-- 视频区 -->
      <section class="videoBox">
        <div class="video_left">
          <div class="video_left_top">
            <div class="videoPlay">
              <VueVideo :VideoSrc='VideoSrc' :controls='true'></VueVideo>
            </div>
            <div class="videoText">
              <span class="title">直线行驶</span>
              <span class="tips"
                >其次在直线行驶中，一定要对方 向做出微调，不要以为方向盘一
                动不动就是直线行驶。微调要领一 是双手不能将肩肘的力量贯穿到方
                向盘，这样，轻微的抖动都会放 大正确做法是放松，稳稳“扶”
                你换会积极...</span
              >
            </div>
          </div>
          <div class="video_left_Bot">
            <div
              v-swiper:mySwiper="swiperOptionVideo"
              class="swiper-container videoListSwiper"
            >
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, idx) in swiperData"
                  :key="idx"
                >
                  <div class="videoListItem">
                    <img :src="item.imgUrl" class="img1" />
                    <span>直线行驶</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="video_right_list">
          <div class="title">
            <span>热门视频</span>
          </div>
          <div class="list_box">
            <div class="hostItem" v-for="(item, idx) in swiperData" :key="idx">
              <img :src="item.imgUrl" class="img1" />
              <span>侧方停车视频图解，看完 之后再也不怕教练</span>
            </div>
          </div>
        </div>
      </section>
      <!-- 展示区 -->
      <section class="lookBook">
        <div class="lookBook_left">
          <div class="look_top">
            <span class="title">2021小车{{subText}}考试</span>
          </div>
          <div class="look_bot">
            <span
              >小车科目二考试又叫小路考，包括倒车入库、侧方停车、坡道定点、直角拐弯、曲线行驶等5个科目二考试技巧项目，满分100分，80分及以上合格，更多内容请看小车C1科目二考试内容及合格标准。</span
            >
          </div>
        </div>
        <div class="lookBook_right">
          <div class="left_imgBox">
            <img src="~/assets/images/a.jpg" alt="" />
          </div>
          <div class="right_textBox">
            <span class="title">考试预约</span>
            <span class="tips">{{city?city.title:''}}{{subText}}在线考试预约入口</span>
          </div>
        </div>
      </section>
   
    </div>
  </div>
</template>
<script>
import drivingSchool from "@/components/drivingSchool.vue";
import { mapGetters, mapState } from "vuex";
import VueVideo from "@/components/VueVideo.vue";

export default {
  components: { drivingSchool, VueVideo },
  data() {
    return {

      swiperData: [
        {
          imgUrl:
            "https://static.banbooyun.com/public/img/indexadmin/banner2.png",
        },
        {
          imgUrl:
            "https://img0.baidu.com/it/u=704161838,1511967238&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          imgUrl:
            "https://img0.baidu.com/it/u=704161838,1511967238&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          imgUrl:
            "https://img0.baidu.com/it/u=704161838,1511967238&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          imgUrl:
            "https://img0.baidu.com/it/u=704161838,1511967238&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          imgUrl:
            "https://img0.baidu.com/it/u=704161838,1511967238&fm=26&fmt=auto&gp=0.jpg",
        },
      ],
      swiperOptionVideo: {
        loop: false,
        autoUpdate: false,
        observer: true,
        observeParents: true,
        slidesPerView: "6",
        spaceBetween: 30,
        on: {
          slideChange() {},
          tap() {},
        },
      },
      titleIndex: 0,
      VideoSrc:''
    };
  },
 watchQuery: ['sub'],
async asyncData({ app, query, params }) {
    let sub = query.sub;
    let subText;
    if (sub == 2) {
      subText = "科目二";
    } else if (sub == 3) {
      subText = "科目三";
    }
    return {
      sub: sub,
      subText: subText,
    };
  },
  methods: {

  },
    computed: {
    ...mapState("navList", ["navActive", "city"]),
  },
  mounted() {
   
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/examination.scss";
@import "~/assets/css/subjectTT.scss";
</style>